<template>
<div>
	<h2 class="intro-title">Input 输入框</h2>
	<p class="intro-content">通过鼠标或键盘输入字符</p>

	<demo01></demo01>
	<demo02></demo02>
	<demo03></demo03>
	<demo04></demo04>
	<demo05></demo05>
	<demo06></demo06>
	<demo07></demo07>
	<demo08></demo08>

	<h3 class="base-title">Input Attributes</h3>
	<table class="attri-table">
		<thead>
			<tr>
				<th>参数</th>
				<th>说明</th>
				<th>类型</th>
				<th>可选值</th>
				<th>默认值</th>
			</tr>
		</thead>
		<tbody>
			<tr v-for='item in list1' :key='item.val1'>
				<td>{{item.val1}}</td>
				<td>{{item.val2}}</td>
				<td>{{item.val3}}</td>
				<td>{{item.val4}}</td>
				<td>{{item.val5}}</td>
			</tr>
		</tbody>
	</table>
</div>
</template>

<script>
import demo01 from './demo01.vue'
import demo02 from './demo02.vue'
import demo03 from './demo03.vue'
import demo04 from './demo04.vue'
import demo05 from './demo05.vue'
import demo06 from './demo06.vue'
import demo07 from './demo07.vue'
import demo08 from './demo08.vue'

const list1 = [{
	val1: 'type',
	val2: '类型',
	val3: 'string',
	val4: 'text / textarea',
	val5: 'text',
},{
	val1: 'value / v-model',
	val2: '绑定值',
	val3: 'string / number',
	val4: '--',
	val5: '--',
},{
	val1: 'maxlength',
	val2: '原生属性，最大输入长度',
	val3: 'number',
	val4: '--',
	val5: '--',
},{
	val1: 'minlength',
	val2: '原生属性，最小输入长度',
	val3: 'number',
	val4: '--',
	val5: '--',
},{
	val1: 'show-word-limit',
	val2: '是否显示输入字数统计，只在 type = "text" 或 type = "textarea" 时有效',
	val3: 'boolean',
	val4: '--',
	val5: 'false',
},{
	val1: 'placeholder',
	val2: '输入框占位文本',
	val3: 'string',
	val4: '--',
	val5: '--',
},{
	val1: 'clearable',
	val2: '是否可清空',
	val3: 'boolean',
	val4: '--',
	val5: 'false',
},{
	val1: 'show-password',
	val2: '是否显示切换密码图标',
	val3: 'boolean',
	val4: '--',
	val5: 'false',
},{
	val1: 'disabled',
	val2: '禁用',
	val3: 'boolean',
	val4: '--',
	val5: 'false',
},{
	val1: 'size',
	val2: '输入框尺寸，只在 type!="textarea" 时有效',
	val3: 'string',
	val4: 'medium / small / mini',
	val5: '--',
},{
	val1: 'prefix-icon',
	val2: '输入框头部图标',
	val3: 'string',
	val4: '--',
	val5: '--',
},{
	val1: 'suffix-icon',
	val2: '输入框尾部图标',
	val3: 'string',
	val4: '--',
	val5: '--',
},{
	val1: 'rows',
	val2: '输入框行数，只对 type="textarea" 有效',
	val3: 'number',
	val4: '--',
	val5: '2',
},{
	val1: 'readonly',
	val2: '原生属性，是否只读',
	val3: 'boolean',
	val4: '--',
	val5: 'false',
}].sort((a, b) => {
	return a.val1.localeCompare(b.val1);
});

export default {
	components: {
		'demo01': demo01,
		'demo02': demo02,
		'demo03': demo03,
		'demo04': demo04,
		'demo05': demo05,
		'demo06': demo06,
		'demo07': demo07,
		'demo08': demo08,
	},
	data () {
		return {
			list1: list1,
		};
	},
}
</script>

<style scoped>
</style>
